<template>
  <div class="carousel-container item_center " @click="showCate=false">
    <el-row class="box_size">
      <!--      一级分类-->
      <el-col :span="4" class="first_cate">
        <div v-for="item in categoryListData" :key="item.id">
          <div @mouseover="getLevel1Category(item.id)" class="category_item_box">
            <span style="font-size: 18px"> {{ item.name }}</span>
            <div style="height: 20px;width: 20px">
              <ArrowRight/>
            </div>
          </div>
        </div>
      </el-col>
      <!--      走马灯-->
      <el-col :span="15">
        <el-carousel height="500px" motion-blur arrow="always" v-if="!showCate">
          <el-carousel-item v-for="item in homeAdvList" :key="item">
            <el-image :src="$img+item.pic" fit="fill" @click="goDetail(item.skuId)" style="height: 500px;width: 100%"/>
          </el-carousel-item>
        </el-carousel>
        <el-card v-else>
          <div v-for="item in Level1CategoryItem" style="padding: 10px 0" :key="item.id"
               class="category_item_box">
                 <span style="font-weight: 600;font-size: 16px">
                   {{ item.name }}
                 </span>
            <br>
            <div style="padding-left: 30px">
                    <span v-for="third in item.children" :key="third.id"
                          @click="goCommodityCategoryView(third.id,third.name)" class="third_class">
                      {{ third.name }}
                      <el-divider direction="vertical"/>
                    </span>
            </div>
            <hr>
          </div>
        </el-card>
      </el-col>
      <el-col :span="5">
        <el-card style="height: 100%">
          <div class="item_center">
            <div>
              <el-avatar :size="100" :src="require('@/assets/not_login_avatar.png')" v-if="!store.isLogin"
                         @click="goLogin"/>
              <el-avatar :size="100" :src="$img+store.loginUser.avatar" v-else @click="goPersonInfor"/>
              <div style="text-align: center">
                <span>{{ store.isLogin ? store.loginUser?.userNickname : "请登录" }}</span>
              </div>
              <el-divider></el-divider>
              <div>
                <el-space wrap>
                  <div style="text-align: center" v-if="store.isLogin">
                    <el-icon>
                      <Star/>
                    </el-icon>
                    <div>
                      <el-text size="small">我的收藏</el-text>
                    </div>
                  </div>
                  <div style="text-align: center" @click="goShopingCart" v-if="store.isLogin">
                    <el-icon>
                      <ShoppingCart/>
                    </el-icon>
                    <div>
                      <el-text size="small">我的购物车</el-text>
                    </div>
                  </div>
                </el-space>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <div class="item_center">
    <div class="box_size">
      <div class="new_title_box">
        <h2>最新上架</h2>
      </div>
      <div>
        <el-row :gutter="20">
          <el-col :span="4" v-for="(item,index) in newSkuList" :key="item.id"
               @click="toDetail(item.id)">
              <el-image style="width: 150px; height: 150px" :src="$img+item.skuDefaultImg" fit="fill">
                <template #error>
                  <div class="image-slot">
                    <el-icon>
                      <icon-picture/>
                    </el-icon>
                  </div>
                </template>
              </el-image>
              <div>
                <el-text>{{ item.skuName }}</el-text>
                <br>
                <el-text type="danger"> ￥{{ item.price }}</el-text>
              </div>
          </el-col>
        </el-row>
      </div>
      <div>
        <div class="new_title_box">
          <h2>为你推荐</h2>
        </div>
        <el-skeleton :loading="loading" animated>
          <template #default>
            <el-row gutter="20">
              <el-col v-for="item in commodityLstData" :span="6" style="margin-top: 10px" @click="toDetail(item.skuId)">
                <sku-card :sku-info="item"></sku-card>
              </el-col>
            </el-row>
          </template>
          <!--      骨架屏-->
          <template #template>
            <el-row justify="space-evenly" v-for="i in 2" :key="i">
              <el-col
                  v-for="(item) in 4"
                  :key="item"
                  :span="5"
              >
                <div>
                  <el-skeleton-item variant="image" style="width: 100%;height: 250px"/>
                  <div style="margin-top: 20px">
                    <el-skeleton-item variant="text" style="width: 50%;height: 20px"/>
                    <el-skeleton-item variant="text" style="width: 100%;height: 20px"/>
                  </div>
                </div>
              </el-col>
            </el-row>
          </template>
        </el-skeleton>
      </div>
    </div>
  </div>
</template>
<script setup>
import {getCategoryByParent, getTreCategoryByParent} from "@/api/category";
import {getNewSkuListApi, getSkuListByAdvice} from '@/api/goods'
import {onMounted, reactive, ref} from "vue";
import {useRouter} from "vue-router";
import {getUsingHomeAdvList} from "@/api";
import SkuCard from "@/components/commodity/SkuCard";
import {useCommonStore} from "@/store";

let categoryListData = ref([])
let router = useRouter()
let store = useCommonStore()
let pageInfo = reactive({
  pageNum: 1,
  pageSize: 5,
  total: Number
})
let newSkuList = ref([])
let homeAdvList = ref([])


function getHomeAdv() {
  getUsingHomeAdvList().then(res => {
    homeAdvList.value = res.data
  })
}

function goLogin() {
  router.push("/login")
}

function goShopingCart() {
  router.push("/person/person-cart")
}

function goDetail(skuId) {
  router.push({
    path: '/home/commodity-detail',
    query: {
      skuId
    }
  })
}

onMounted(() => {
  /*获取一级分类*/
  getLevelCategoryList()
  //获取首页轮播广澳
  getHomeAdv()
  //获取最新上架的商品
  getNewSkuList()
  getUpSkuList()
})

/**
 * 获取以一级分类
 */
function getLevelCategoryList() {
  getCategoryByParent(0).then((res) => {
    categoryListData.value = res.data
  })
}

/*
获取最新上架sku
 */
function getNewSkuList() {
  getNewSkuListApi(pageInfo).then(res => {
    newSkuList.value = res.data.records
  })
}

function goPersonInfor() {
  router.push("/person")
}

/**
 * 前往商品详情
 * @param skuId
 */
function toDetail(skuId) {
  router.push({
    path: '/home/commodity-detail',
    query: {
      skuId: skuId
    }
  })
}

//是否显示分类信息
let showCate = ref(false)
let Level1CategoryItem = ref([])//一级分类下的所有子分类
/**
 * 前往该分类下的搜索页面
 * @param categoryId
 * @param categoryName
 */
function goCommodityCategoryView(categoryId, categoryName) {
  router.push({
    path: '/home/commodity-search',
    query: {
      categoryId,
      searchValue: categoryName
    }
  })
}

/**
 * 获取选择的以及分类下的子分类（树结构）
 * @param selectCategory
 */
function getLevel1Category(selectCategory) {
  getTreCategoryByParent(selectCategory).then(res => {
    Level1CategoryItem.value = res.data
  }).finally(() => {
    if (!showCate.value) {
      showCate.value = true
    }
  })
}

let loading = ref(true)
let commodityLstData = ref([])

function getUpSkuList() {
  getSkuListByAdvice(1, 12).then(res => {
    commodityLstData = res.data
    loading.value = false
  })
}

</script>

<style scoped>
.carousel-container {
  height: 500px;
  width: 100%; /* 根据需要调整 */
  background-color: #232C63;
}

.item_center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.first_cate {
  height: 500px;
  background-color: #1DAEEE;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 10px;
}

.category_item_box:hover {
  background-color: #d3dce6;
  color: #098CC0;
}

.category_item_box {
  display: flex;
  justify-content: space-between;
}

.new_title_box {
  background-color: #098CC0;
  text-align: center;
}

.box_size {
  width: 1200px;
}

.scrollbar-flex-content {
  display: flex;
}

.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 4px;
  padding: 5px;
}

.third_class:hover {
  color: red;
}

</style>
